<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" th:href="@{/assets/css/layui.css}">
<link rel="stylesheet" type="text/css" th:href="@{/assets/css/view.css}">
<link rel="stylesheet" type="text/css" th:href="@{/assets/jquery-upload/css/jquery.fileupload-ui.css}">
<link rel="stylesheet" type="text/css" th:href="@{/assets/jquery-upload/css/jquery.fileupload.css}">
<title></title>
</head>
<body class="layui-view-body">
<div class="layui-content">
    <div class="layui-row">
        <div class="layui-card">
            <form id="film-form" class="layui-form layui-card-body" action="#" method="post">

                <div class="layui-form-item">
                    <label class="layui-form-label">商品名</label>
                    <div class="layui-input-block">
                        <!-- <input type="text" name="nation" required th:value="${film.nation}"  lay-verify="required" placeholder="影片名" autocomplete="off" class="layui-input">-->
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block">
                        <select name="type" lay-verify="required">
                            <option value=""></option>
                            <!-- <option th:each="type:${typeDicts}" th:selected="${film.type eq type.value}" th:value="${type.value}" th:text="${type.name}">北京</option>-->
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">图片</label>
                    <div class="layui-input-block">
                        <div id="queue">
                            <!--  <img alt="" th:style="${(film.filmpic != null and film.filmpic != '') ? '' : 'display:none'}" width="240px" id="queue_img" height="240px" th:src="@{'/cms/film/' + ${film.filmpic}}" >-->
                        </div><br>
                        <button type="button" class="layui-btn" id="film-pic">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">简介</label>
                    <div class="layui-input-block">
                        <!--<div id="remark" th:name="summary" th:utext="${film.summary}"></div>
                        <textarea th:hidden="summary" th:name="summary" id="summary" th:utext="${film.summary}"></textarea>-->
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn layui-btn-blue" onclick="saveFilm()">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/assets/layui.all.j}"></script>
<script type="text/javascript" th:src="@{/assets/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/assets/jquery-upload/vendor/jquery.ui.widget.js}"></script>
<script type="text/javascript" th:src="@{/assets/jquery-upload/jquery.iframe-transport.js}"></script>
<script type="text/javascript" th:src="@{/assets/jquery-upload/jquery.fileupload.js}"></script>
<!--富文本编辑器wangEditor-->
<script type="text/javascript" th:src="@{/assets/wangeditor/wangEditor.min.js}"></script>

<script inline="javascript">
    /*<![CDATA[*/
    var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
    /*]]>*/
</script>
<script>
    var form = layui.form
        ,layer = layui.layer;
</script>
<!--wangEditor 富文本编辑器-->
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#remark')
    var text_summary = $('#summary')
    editor.customConfig.onchange = function (html) {
        // 监控变化，同步更新到 textarea
        text_summary.val(html)
    }
    // 配置服务器端地址
    editor.customConfig.uploadImgServer = contextPath + '/a/u/upload/editor'
    //配置指定文件名
    editor.customConfig.uploadFileName = 'file'
    editor.customConfig.uploadImgHooks = {
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
            var url =result.data[0];
            insertImg(url);
        }
    }
    /*加载插件*/
    editor.create()
</script>
<!--图片上传-->
<script type="text/javascript">
    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#film-pic' //绑定元素
            ,url: contextPath + '/a/u/upload/editor' //上传接口
            ,done: function(res){
                //上传完毕回调
                //将图片路径放到film实体的图片路径属性中
                console.log(res.data);
                $("#filmpic").val(res.data[1]);
                //将图片路径放到img标签中
                $("#queue_img").css("display","block");
                $("#queue_img").attr("src", contextPath + "/cms/film/" + res.data[1]);
            }
            ,error: function(res){
                //请求异常回调
                layer.msg(res.data);
            }
        });
    });

</script>
<!--异步保存-->
<script type="text/javascript">
    function saveFilm() {
        var data = $("#film-form").serialize();
        $.ajax({
            type : "post",
            url : contextPath + "/a/u/film/save",
            data : data,
            success : function(jsonData) {
                layer.msg('保存成功', {icon: 1},function () {
                    location.href = contextPath + "/a/u/film/list"
                });
            }
        })
    }
</script>
</body>
</html>